$(function () {
    //定义一个全局的对象作为参数使用
    let q = {
        pagenum: 1,  //页码值
        pagesize: 2,  //每页显示多少数据
        cate_id: '',
        state: '',
    }

    //1. 初始化文章列表 封装成函数
    let layer = layui.layer;
    initArticleList();
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q,
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            };
            //渲染页面
            let ary = [];
            res.data.data.forEach(item => {
                ary.push(`
                        <tr>
                            <td>${item.title}</td>
                            <td>${item.cate_name}</td>
                            <td>${padZero(item.pub_date)}</td>
                            <td>${item.state}</td>
                            <td>
                                <button class="layui-btn layui-btn-xs">修改</button>
                                <button data-id="${ item.Id }" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                            </td>
                        </tr>   
                `);
            })
            $('tbody').empty().html(ary.join(''));
            // console.log(res.data.total);
            renderPage(res.data.total);
        })
    }

    //2. 渲染分类下拉菜单
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
        }).then(res => {
            // console.log(res.data.data)
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            //渲染页面
            let ary = ['<option value="">请选择分类</option>'];
            res.data.data.forEach(function (item) {
                ary.push(`<option value=${item.Id}>${item.name}</option>`);
            });
            $('[name=cate_id]').empty().html(ary.join(''));
            form.render();
            //form.render(type, filter);第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。filter，为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。
        })
    };

    // 3. 筛选功能
    $('#searchForm').on('submit', function (e) {
        e.preventDefault();
        q.cate_id = $('[name=cate_id]').val();
        q.state = $('[name=state]').val();
        initArticleList();
    })

    //4. 分页实现
    function renderPage(total) {
        var laypage = layui.laypage;
        //layui中的方法
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每页显示的条数
            curr: q.pagenum,
            //显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            //设置一页几行 skip（快捷跳页区域）  count（总条目输区域） limit（条目选项区域)
            limits: [2, 3, 5, 10, 20],
            //页码加载的时候.页面切换的时候会触发,每页显示条数的时候会触发
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    initArticleList();
                }
            }
        });
    }

    //5. 删除文章
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id');
        layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){
            //do something
            axios({
                url:'/my/article/delete/' + id,
            }).then(res => {
                // console.log(res.data);
                if(res.data.status !== 0){
                    return layer.msg(res.data.message);
                }
                layer.msg('恭喜您,删除成功');
                //判断删除的是否是页面中的最后一条,ajax发送后页面并没有渲染还有数据
                if($('.del-btn').length === 1 && q.pagenum >=2){
                    q.pagenum--;
                }
                initArticleList();
            })
            layer.close(index);
        })
            
          });

})